<template>

<router-view />

  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <MyHeader @addTodo="addTodo" />
        <MyList
          :todos="todos"
          @delTodo="delTodo"
          @checktodo="checkTodo"
          @updateTodo="updateTodo"
        />
        <MyFooter
          :todos="todos"
          @checkAllTodo="checkAllTodo"
          @clearAllTodo="clearAllTodo"
        />
      </div>
    </div>
  </div>
</template>

<script>
// import Start from "./components/Start"

// import { bus } from "@/utlils";
import MyHeader from "./components/MyHeader";
import MyList from "./components/MyList";
import MyFooter from "./components/MyFooter";
import { defineComponent,watch, computed } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  name: "App",
  components: { MyHeader, MyList, MyFooter},
  setup() {
    let store = useStore();
    let todos = computed(() => {
      return store.state.list||[];
    });
    const addTodo = (todoObj) => {
      let flag = true;
      todos.value.forEach((item) => {
        if (todoObj.title == item.title) {
          flag = false;
          return alert("重复！！！！！！！！！！！");
        }
      });
      if (flag) {
        store.commit("addTodo", todoObj);
      }
    };
    const delTodo = (index) => {
      store.commit("delTodo", index);
    };
    const checkTodo = (index) => {
      store.commit("checkTodo", index);
    };
    const checkAllTodo = (value) => {
      store.commit("checkAllTodo", value);
    };
    let clearAllTodo = () => {
      store.commit("clear");
    };
    let updateTodo = (data) => {
      store.commit("updateTodo", data);
    };
        watch(
      todos,
      (newvalue, old) => {
        console.log(newvalue, old);
        sessionStorage.setItem("todos", JSON.stringify(newvalue));
      },
      { deep: true }
    );
    return {
      addTodo,
      todos,
      delTodo,
      checkTodo,
      checkAllTodo,
      clearAllTodo,
      updateTodo,
    };
  },
});
</script>

<style>
body {
  background: #fff;
}
.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.btn-edit {
  color: #fff;
  background-color: #8ada49;
  border: 1px solid #2fbd82;
}
.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}
.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}
.btn:focus {
  outline: none;
}
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
